<template>
  <div class="win">
    <button v-if="addressData==''" @click="hr_reviseAdress" class="no_data_btn green_btn">创建收货地址</button>
    <div class="address_data_box">
      <div class="item" v-for="(item, index) in addressData" :key="index">
        <!-- <img class="green_yes" v-if="item.status==1" :src="bjurl+'green_yes.png'" alt />
        <button v-else @click="currentAddress(item.address_id,item.status)">使用</button>-->
        <div class="name_box">
          <p class="name">{{item.name}}</p>
          <p class="phone">{{item.phone}}</p>
        </div>
        <div class="address_box">
          <p class="address ellipsis2">{{item.address}}</p>
        </div>
        <div class="liner"></div>
        <div class="item_bottom_box">
          <div
            class="default_box"
            @click="currentAddress(item.address_id,item.status)"
            :class="item.status==1?'green':'black'"
          >
            <img v-if="item.status==1" :src="bjurl+'check_green_logo.png'" />
            <img v-else :src="bjurl+'check_grey_logo.png'" />
            <p>{{item.status==1?'已设为默认':'设为默认'}}</p>
          </div>
          <div class="bottom_right_box">
            <div @click="getAddressDetail(item.address_id)" class="edit">
              <img :src="bjurl+'edit_logo.png'" @click="hr_reviseAdress" />
              <p>编辑</p>
            </div>
            <div class="delete" @click="toggleList(index,item.address_id)">
              <img :src="bjurl+'delete_logo.png'" />
              <p>删除</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button v-if="addressData!=''" @click="hr_reviseAdress" class="btn green_btn">新增收货地址</button>
    <i-toast id="toast" />
    <i-modal :visible="popupShow" @ok="popupConfirm" @cancel="popupCancel">
      <view>确定删除该条消息吗</view>
    </i-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      addressData: [], //收货地址列表数据
      popupShow: false,
      addressList: {},
      current: 0, //当前选择第几个地址
      inputName: "",
      inputPhone: "",
      inputAddress: "",
      inputstatus: "",
      inputAddress_id: "",
      inputTap: 0
    };
  },
  methods: {
    //请求接口删除收货地址
    getDeleteAddress(address_id) {
      this.$ajax("/home/address/del", "post", {
        address_id: address_id
      })
        .then(res => {
          if (res.status) {
            this.getAddressData();
            this.$toast({
              content: "删除成功~"
            });
          } else {
          }
        })
        .catch(err => {});
    },
    //请求接口修改默认状态
    getAddressDefault(address_id, status) {
      this.$ajax("/home/address/write", "post", {
        address_id: address_id,
        status: 1
      })
        .then(res => {
          if (res.status) {
            this.getAddressData();
          } else {
          }
        })
        .catch(err => {});
    },
    //请求接口地址列表
    getAddressData() {
      this.$ajax("/home/address/index", "post", {})
        .then(res => {
          if (res.status) {
            this.addressData = res.data;
          } else {
            this.addressData = "";
          }
        })
        .catch(err => {});
    },
    //请求接口编辑收货地址
    getAddressDetail(address_id) {
      this.inputTap = 1;
      this.hr_reviseAdress(address_id);
    },
    //修改默认地址
    // defaultCurShow(index, item) {
    //   if (item.status == 1) return;
    //   for (let i = 0; i < addressData.length; i++) {
    //     if (addressData[i].status == 1) {
    //       addressData[i].status = 2;
    //     }
    //   }
    //   item.status = 1;
    // },
    //修改使用地址
    currentAddress(address_id, status) {
      if (status == 1) return;
      else {
        this.getAddressDefault(address_id, status);
      }
    },
    //跳转到地址修改
    hr_reviseAdress(id) {
      if (this.inputTap == 1) {
        wx.navigateTo({
          url: "../reviseAdress/main?address_id=" + id
        });
      } else
        wx.navigateTo({
          url: "../reviseAdress/main"
        });
    },
    //存储地址数据(index,id)
    toggleList(index, address_id) {
      this.addressList = {
        index,
        address_id
      };
      this.popupShow = true;
    },
    //取消删除
    popupCancel() {
      this.popupShow = false;
      this.addressData[this.addressList.index].delete = undefined;
    },
    // 确认删除
    popupConfirm(e) {
      this.popupShow = false;
      this.getDeleteAddress(this.addressList.address_id);
    }
  },
  onShow() {
    this.getAddressData();
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.popupShow = this.popupShow;
    this.current = this.current;
    this.addressList = this.addressList;
    this.defaultCur = this.defaultCur;
  }
};
</script>

<style lang="scss" scoped>
.win {
  .green_btn {
    width: 692rpx;
    height: 92rpx;
    border-radius: 46rpx;
    background: linear-gradient(
      0deg,
      rgba(11, 208, 94, 1),
      rgba(11, 208, 173, 1)
    );
    line-height: 92rpx;
    color: #ffffff;
    font-size: 40rpx;
  }
  .no_data_btn {
    margin: 32vh auto 0;
  }
  .btn {
    margin: 90rpx auto 80rpx;
  }
  .address_data_box {
    .item {
      background-color: #ffffff;
      margin-top: 20rpx;
      position: relative;
      .green_yes {
        position: absolute;
        top: 34rpx;
        right: 32rpx;
        width: 35rpx;
        height: 25rpx;
      }
      button {
        position: absolute;
        top: 28rpx;
        right: 30rpx;
        color: #999999;
        font-size: 24rpx;
        width: 100rpx;
        height: 46rpx;
        line-height: 44rpx;
        border: 1rpx solid #999999;
        border-radius: 23rpx;
      }
      .name_box {
        display: flex;
        align-items: flex-end;
        padding: 24rpx 0 0 30rpx;
        color: #4d4d4d;
        .name {
          font-size: 36rpx;
        }
        .phone {
          margin-left: 28rpx;
          font-size: 32rpx;
        }
      }
      .address_box {
        padding: 20rpx 0 25rpx 30rpx;
        .address {
          width: 580rpx;
          line-height: 1.5;
        }
      }
      .liner {
        background-color: #f5f2ed;
        height: 2rpx;
        width: 750rpx;
      }
      .item_bottom_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx 0 30rpx;
        .green {
          color: $green;
        }
        .black {
          color: #999999;
        }
        .default_box {
          height: 80rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          img {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            margin-right: 12rpx;
          }
        }
        .bottom_right_box {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #999999;
          .edit {
            display: flex;
            align-items: center;
            img {
              width: 24rpx;
              height: 27rpx;
              margin-right: 8rpx;
              margin-bottom: 2rpx;
            }
          }
          .delete {
            margin-left: 34rpx;
            display: flex;
            align-items: center;
            img {
              width: 22rpx;
              height: 25rpx;
              margin-right: 9rpx;
            }
          }
        }
      }
    }
  }
}
</style>
